<template>
    <div class="tw:relative tw:h-64 tw:p-4 tw:mb-4 tw:bg-gray-100">
        <p class="tw:font-bold">static(默认)</p>
        <div class="tw:p-2 tw:bg-blue-500 tw:text-white">
            默认定位, 不脱离文档流
        </div>
    </div>

    <div class="tw:relative tw:h-64 tw:p-4 tw:mb-4 tw:bg-gray-100">
        <p class="tw:font-bold">relative</p>
        <div class="tw:relative tw:left-4 tw:top-4 tw:p-2 tw:bg-green-500 tw:text-white">
            相对于原位置偏移, 保留原空间
        </div>
    </div>

    <div class="tw:relative tw:h-64 tw:p-4 tw:mb-4 tw:bg-gray-100">
        <p class="tw:font-bold">absolute</p>
        <div class="tw:absolute tw:bottom-4 tw:right-4 tw:p-4 tw:mb-4 tw:bg-red-500">
            相对于最近的非 static 祖先元素定位
        </div>
    </div>

    <div class="tw:relative tw:h-64 tw:p-4 tw:mb-4 tw:bg-gray-100">
        <p class="tw:font-bold">fixed</p>
        <div class="tw:fixed tw:bottom-4 tw:left-4 tw:p-2 tw:bg-purple-500 tw:text-white">
            相对视口固定, 不随滚动而移动
        </div>
    </div>

    <div class="tw:relative tw:h-64 tw:p-4 tw:mb-4 tw:bg-gray-100 tw:opacity-80">
        <p class="tw:font-bold">sticky</p>
        <div class="tw:sticky tw:top-0 tw:p-2 tw:bg-yellow-500 tw:text-white">
            滚动到到阀值后固定
        </div>
        <div class="tw:h-900"></div>
    </div>
</template>